<!DOCTYPE html>

<head lang="en">
  <meta charset="UTF-8">
  <title>Column groups visual tests</title>
  <script src="../../../webcomponentsjs/webcomponents-lite.js"></script>
  <script>
    const theme = window.location.search.replace(/.*theme=(\w+).*/, '$1') || 'lumo';
    document.write(`<link rel="import" href="../../theme/${theme}/vaadin-grid.html">`);
    document.write(`<link rel="import" href="../../theme/${theme}/vaadin-grid-column-group.html">`);

    const dir = window.location.search.replace(/.*dir=(\w+).*/, '$1') || 'ltr';
    document.documentElement.setAttribute('dir', dir);
  </script>
  <script src="../../demo/grid-demo-data.js"></script>
  <link href="../../demo/x-data-provider.html" rel="import">
</head>

<body>
  <style media="screen">
    .capture-block {
      display: inline-block;
      width: 800px;
    }
  </style>

  <div class="capture-block" id="column-groups">
    <dom-bind>
      <template>
        <custom-style>
          <style>
            vaadin-grid {
              height: 250px;
            }
          </style>
        </custom-style>
        <x-data-provider data-provider="{{dataProvider}}"></x-data-provider>

        <vaadin-grid data-provider="[[dataProvider]]" size="200" column-reordering-allowed>

          <vaadin-grid-column width="30px" flex-grow="0" resizable>
            <template class="header">#</template>
            <template>[[index]]</template>
          </vaadin-grid-column>

          <vaadin-grid-column width="50px" flex-grow="0" resizable>
            <template class="header">
              <div aria-label="Picture"></div>
            </template>
            <template>
              <iron-image alt="[[item.name.first]] [[item.name.last]]" src="[[item.picture.thumbnail]]"></iron-image>
            </template>
          </vaadin-grid-column>

          <vaadin-grid-column-group resizable>
            <template class="header">Name</template>

            <vaadin-grid-column width="calc(25% - 20px)">
              <template class="header">First</template>
              <template>[[item.name.first]]</template>
            </vaadin-grid-column>

            <vaadin-grid-column width="calc(25% - 20px)">
              <template class="header">Last</template>
              <template>[[item.name.last]]</template>
            </vaadin-grid-column>
          </vaadin-grid-column-group>

          <vaadin-grid-column-group resizable>
            <template class="header">Location</template>

            <vaadin-grid-column width="calc(25% - 20px)">
              <template class="header">City</template>
              <template>[[item.location.city]]</template>
            </vaadin-grid-column>

            <vaadin-grid-column width="calc(25% - 20px)">
              <template class="header">State</template>
              <template>[[item.location.state]]</template>
            </vaadin-grid-column>

            <vaadin-grid-column width="200px" resizable>
              <template class="header">Street</template>
              <template>[[item.location.street]]</template>
            </vaadin-grid-column>
          </vaadin-grid-column-group>

        </vaadin-grid>
      </template>
    </dom-bind>
  </div>

</body>
